<template>
	<teleport to="body">
		<div class="enhanced-image-viewer" v-show="visible" @wheel.prevent="handleZoom">
			<!-- 遮罩层 -->
			<div class="viewer-mask" @click="handleMaskClick"></div>
			
			<!-- 图片容器 -->
			<div class="viewer-container">
				<!-- 主图片显示区 -->
				<div class="image-wrapper" 
					:style="imageWrapperStyle"
					@mousedown="startDrag"
					@touchstart="startDrag"
					@mousemove="onDrag"
					@touchmove="onDrag"
					@mouseup="stopDrag"
					@touchend="stopDrag"
					@mouseleave="stopDrag">
					<img 
						ref="imageEl"
						:src="url" 
						:style="imageStyle" 
						@load="onImageLoad" 
						class="main-image"
						alt="图片预览" />
				</div>
				
				<!-- 加载状态 -->
				<div class="loading-wrapper" v-show="loading">
					<el-icon class="loading-icon"><Loading /></el-icon>
					<span>加载中...</span>
				</div>
				
				<!-- 图片操作工具栏 -->
				<div class="toolbar" v-show="!loading">
					<div class="tool-item" @click="zoomIn" title="放大">
						<el-icon><ZoomIn /></el-icon>
					</div>
					<div class="tool-item" @click="zoomOut" title="缩小">
						<el-icon><ZoomOut /></el-icon>
					</div>
					<div class="tool-item" @click="resetZoom" title="实际大小">
						<el-icon><FullScreen /></el-icon>
					</div>
					<div class="tool-item" @click="rotateLeft" title="向左旋转">
						<el-icon><RefreshLeft /></el-icon>
					</div>
					<div class="tool-item" @click="rotateRight" title="向右旋转">
						<el-icon><RefreshRight /></el-icon>
					</div>
					<div class="tool-item" @click="downloadImage" title="下载">
						<el-icon><Download /></el-icon>
					</div>
				</div>
			</div>
			
			<!-- 关闭按钮 -->
			<div class="close-btn" @click="onClose" title="关闭">
				<el-icon><Close /></el-icon>
			</div>
		</div>
	</teleport>
</template>

<script>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { 
	ZoomIn, ZoomOut, RefreshLeft, RefreshRight, 
	FullScreen, Download, Close, Loading 
} from '@element-plus/icons-vue';

export default {
	name: "FullImage",
	components: {
		ZoomIn, ZoomOut, RefreshLeft, RefreshRight, 
		FullScreen, Download, Close, Loading
	},
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		url: {
			type: String,
			default: ''
		}
	},
	setup(props, { emit }) {
		// 状态管理
		const imageEl = ref(null);
		const loading = ref(true);
		const scale = ref(1);
		const rotation = ref(0);
		const isDragging = ref(false);
		const dragStartX = ref(0);
		const dragStartY = ref(0);
		const translateX = ref(0);
		const translateY = ref(0);
		
		// 是否是移动端
		const isMobile = ref(window.innerWidth <= 768);
		
		// 图片样式
		const imageStyle = computed(() => {
			return {
				transform: `rotate(${rotation.value}deg) scale(${scale.value})`,
				cursor: isDragging.value ? 'grabbing' : 'grab'
			};
		});
		
		// 图片包装器样式
		const imageWrapperStyle = computed(() => {
			return {
				transform: `translate(${translateX.value}px, ${translateY.value}px)`
			};
		});
		
		// 图片加载完成回调
		const onImageLoad = () => {
			loading.value = false;
			resetZoom();
		};
		
		// 放大
		const zoomIn = () => {
			scale.value = Math.min(scale.value * 1.25, 10);
		};
		
		// 缩小
		const zoomOut = () => {
			scale.value = Math.max(scale.value * 0.8, 0.1);
		};
		
		// 重置缩放
		const resetZoom = () => {
			if (!imageEl.value) return;
			
			scale.value = 1;
			rotation.value = 0;
			translateX.value = 0;
			translateY.value = 0;
		};
		
		// 向左旋转
		const rotateLeft = () => {
			rotation.value = (rotation.value - 90) % 360;
		};
		
		// 向右旋转
		const rotateRight = () => {
			rotation.value = (rotation.value + 90) % 360;
		};
		
		// 下载图片
		const downloadImage = () => {
			if (!props.url) return;
			
			const link = document.createElement('a');
			link.href = props.url;
			link.download = props.url.split('/').pop() || 'image';
			link.target = '_blank';
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		};
		
		// 处理鼠标滚轮缩放
		const handleZoom = (event) => {
			if (event.deltaY < 0) {
				zoomIn();
			} else {
				zoomOut();
			}
		};
		
		// 开始拖动
		const startDrag = (event) => {
			isDragging.value = true;
			
			// 支持触摸设备和鼠标设备
			if (event.type === 'touchstart') {
				dragStartX.value = event.touches[0].clientX - translateX.value;
				dragStartY.value = event.touches[0].clientY - translateY.value;
			} else {
				dragStartX.value = event.clientX - translateX.value;
				dragStartY.value = event.clientY - translateY.value;
			}
		};
		
		// 拖动中
		const onDrag = (event) => {
			if (!isDragging.value) return;
			
			event.preventDefault();
			
			// 支持触摸设备和鼠标设备
			if (event.type === 'touchmove') {
				translateX.value = event.touches[0].clientX - dragStartX.value;
				translateY.value = event.touches[0].clientY - dragStartY.value;
			} else {
				translateX.value = event.clientX - dragStartX.value;
				translateY.value = event.clientY - dragStartY.value;
			}
		};
		
		// 停止拖动
		const stopDrag = () => {
			isDragging.value = false;
		};
		
		// 点击遮罩层关闭
		const handleMaskClick = (event) => {
			// 只有点击遮罩层才关闭，避免误操作
			if (event.target.classList.contains('viewer-mask')) {
				onClose();
			}
		};
		
		// 关闭查看器
		const onClose = () => {
			resetZoom();
			loading.value = true;
			emit('close');
		};
		
		// 处理窗口大小变化
		const handleResize = () => {
			isMobile.value = window.innerWidth <= 768;
		};
		
		// 处理ESC键盘事件关闭图片预览
		const handleKeyDown = (event) => {
			if (event.key === 'Escape' && props.visible) {
				onClose();
			}
		};
		
		// 生命周期钩子
		onMounted(() => {
			window.addEventListener('resize', handleResize);
			window.addEventListener('keydown', handleKeyDown);
		});
		
		onBeforeUnmount(() => {
			window.removeEventListener('resize', handleResize);
			window.removeEventListener('keydown', handleKeyDown);
		});
		
		return {
			imageEl,
			loading,
			scale,
			rotation,
			translateX,
			translateY,
			isDragging,
			isMobile,
			imageStyle,
			imageWrapperStyle,
			onImageLoad,
			zoomIn,
			zoomOut,
			resetZoom,
			rotateLeft,
			rotateRight,
			downloadImage,
			handleZoom,
			startDrag,
			onDrag,
			stopDrag,
			handleMaskClick,
			onClose
		};
	}
}
</script>

<style lang="scss">
.enhanced-image-viewer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 2000;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	
	// 遮罩层
	.viewer-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.85);
		backdrop-filter: blur(2px);
		transition: opacity 0.3s;
	}
	
	// 图片容器
	.viewer-container {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		
		// 图片包装器
		.image-wrapper {
			position: relative;
			transition: transform 0.1s ease-out;
			
			// 主图片
			.main-image {
				max-width: 90vw;
				max-height: 80vh;
				object-fit: contain;
				transition: transform 0.3s ease;
				user-select: none;
				-webkit-user-drag: none;
			}
		}
		
		// 加载中
		.loading-wrapper {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			color: white;
			
			.loading-icon {
				font-size: 36px;
				margin-bottom: 12px;
				animation: spin 1.5s linear infinite;
			}
			
			@keyframes spin {
				from { transform: rotate(0deg); }
				to { transform: rotate(360deg); }
			}
		}
		
		// 工具栏
		.toolbar {
			position: absolute;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			background-color: rgba(0, 0, 0, 0.5);
			border-radius: 24px;
			padding: 8px 12px;
			gap: 8px;
			backdrop-filter: blur(5px);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			z-index: 20;
			
			// 工具项
			.tool-item {
				width: 36px;
				height: 36px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				cursor: pointer;
				color: white;
				transition: all 0.2s;
				
				.el-icon {
					font-size: 20px;
				}
				
				&:hover {
					background-color: rgba(255, 255, 255, 0.2);
					transform: scale(1.1);
				}
				
				&:active {
					transform: scale(0.95);
				}
			}
		}
	}
	
	// 关闭按钮
	.close-btn {
		position: absolute;
		top: 20px;
		right: 20px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		color: white;
		z-index: 20;
		transition: all 0.2s;
		
		.el-icon {
			font-size: 24px;
		}
		
		&:hover {
			background-color: rgba(255, 255, 255, 0.2);
			transform: rotate(90deg);
		}
	}
}

// 响应式适配
@media (max-width: 768px) {
	.enhanced-image-viewer {
		.toolbar {
			padding: 6px 10px;
			
			.tool-item {
				width: 32px;
				height: 32px;
				
				.el-icon {
					font-size: 18px;
				}
			}
		}
		
		.close-btn {
			top: 15px;
			right: 15px;
			width: 36px;
			height: 36px;
			
			.el-icon {
				font-size: 20px;
			}
		}
	}
}

// 过渡动画
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}
</style>